/*
* @Author: Yejing
* @Date: 2023-06-02 09:30:09
* @LastEditors: Yejing
* @LastEditTime: 2023-06-09 17:34:12
* @Description: 视频组件
*/
<template>
	<view class="c-video-page">
		<view class="swiper-item" @click.stop="">
			<video :class="`${flag?'stop':''}`" v-if="videoObj.userName !== undefined"
				:src="$u.file.getMedieUrl(videoObj.url)" :id="cVideoId" loop
				@timeupdate="$emit('timeupdate',$event);timeupdate($event)" x-webkit-airplay="allow"
				x5-video-orientation="portrait" webkit-playsinline="true" playsinline="true"
				:show-center-play-btn="false" :autoplay="false" @click.stop="changeVideoStatus($event)" @play="onplay"
				@pause="onpause" x5-video-player-type="h5-page" @error="$emit('error',videoObj)"
				@waiting="$emit('wait',$event)">
			</video>
			<!-- 根据此状态显示或者隐藏暂停按钮 -->
			<view class="icon-view" v-if="flag">
				<cover-image src="@/static/images/video/play.png" @click="changeVideoStatus()">
				</cover-image>
			</view>
			<view class="user-list-left">
				<view v-if="!taskInfo.offlineId" :class="`${videoObj.liveing?'lives':''} user-avatar`">
					<imageForSize v-if="videoObj.liveing" style="position: absolute;left: 0;top: 0;z-index: 100;"
						:src="require('@/static/images/video/living.png')" size="32" radius="50%"></imageForSize>
					<imageForSize @click="intoLives" :key="videoObj.avatar" :src="$u.file.getMedieUrl(videoObj.avatar)"
						size="96" radius="50%" style="border: 2rpx solid #fff;"></imageForSize>
					<imageForSize :key="~~videoObj.concern" @click="Follow" class="follow-icon"
						:src="require(`@/static/images/video/follow-${~~videoObj.concern}.png`)" size="48" radius="50%">
					</imageForSize>
				</view>
				<view class="bottom-list">
					<template v-if="!taskInfo.offlineId">
						<view class="shopping" v-if="videoObj.boundGoods">
							<image src="@/static/images/shortVideo/shoppingCar.png" @click="goToShoppingCar"></image>
						</view>
						<view class="item" v-if="!record">
							<imageForSize :key="videoObj.currentCollection" size="64" class="handel-img"
								@click="getCollection"
								:src="require(`@/static/images/video/star${version}-${videoObj.currentCollection!=0?'s':'k'}.png`)">
							</imageForSize>
							<c-number :val="videoObj.collection"></c-number>
						</view>
						<view class="item" v-if="!record">
							<imageForSize size="64" class="handel-img" @click="openSharePop"
								:src="require(`@/static/images/video/share${version}-k.png`)"></imageForSize>
							<c-number :val="videoObj.forward"></c-number>
						</view>
						<view class="item">
							<imageForSize size="64" class="handel-img" @click="getComment"
								:src="require(`@/static/images/video/comment${version}-k.png`)"></imageForSize>
							<c-number :val="videoObj.comments"></c-number>
						</view>
						<view class="item" v-if="!record">
							<imageForSize :key="videoObj.currentLike" size="64" class="handel-img" @click="getHeart"
								:src="require(`@/static/images/video/heart${version}-${videoObj.currentLike!=0?'s':'k'}.png`)">
							</imageForSize>
							<c-number :val="videoObj.likeCount"></c-number>
						</view>
					</template>
					<!-- 线下理财 -->
					<template v-else>
						<view class="item" v-if="taskInfo.collectCount">
							<imageForSize :key="~~(offLine.collect>=taskInfo.collectCount)" class="handel-img"
								@click="$emit('offOnlineClick','collect')" size="64"
								:src="require(`@/static/images/video/star${version}-${offLine.collect>=taskInfo.collectCount?'s':'k'}.png`)">
							</imageForSize>
						</view>
						<view class="item" v-if="taskInfo.zanCount">
							<imageForSize :key="~~(offLine.zan>=taskInfo.zanCount)" class="handel-img"
								@click="$emit('offOnlineClick','zan')" size="64"
								:src="require(`@/static/images/video/zan${version}-${offLine.zan>=taskInfo.zanCount?'s':'k'}.png`)">
							</imageForSize>
						</view>
						<view class="item" v-if="taskInfo.heartCount">
							<imageForSize :key="~~(offLine.heart>=taskInfo.heartCount)" class="handel-img"
								@click="$emit('offOnlineClick','heart')" size="64"
								:src="require(`@/static/images/video/heart${version}-${offLine.heart>=taskInfo.heartCount?'s':'k'}.png`)">
							</imageForSize>
						</view>
					</template>
				</view>
			</view>
			<view class="video-text" style="">
				<view class="video-user-name" style="font-size: 40rpx;">
					{{videoObj.userName}}
				</view>
				<view class="video-title-box">
					<view :class="`video-title ${titleShowAll?'open':''}`" style="font-size: 30rpx;">
						{{videoObj.title}}
					</view>
					<view style="display: flex;align-items:flex-end;" v-if="titleOver">
						<text
							@click="titleShowAll = !titleShowAll">{{$t(`classifySeckill.${titleShowAll?'retract':'expand'}`)}}</text>
					</view>
				</view>
				<view v-if="videoObj.musicName" class="video-music-name" style="font-size: 30rpx;">
					<imageForSize size="30" :src="require('@/static/images/video/music.png')"></imageForSize>
					{{videoObj.musicName}}
				</view>

			</view>
		</view>
		<!-- 转发-->
		<!-- 评论弹出框 -->
		<u-popup ref="commentFlag" v-model="commentFlag" mode="bottom" class="interior-popup">
			<scroll-view scroll-y="true" class="friendScrollView" @touchmove.stop lower-threshold="50"
				@scrolltolower="pagingEvent">
				<view v-for="(item,index) in commentList.list" :key="item.id" class="comment">
					<view class="father" @click="replyComment=item;commentEvent()">
						<u-avatar size="72" :src="$u.file.getMedieUrl(item.avatar)"></u-avatar>
						<infoStatus @expand="expand" :item.sycn="item"></infoStatus>
					</view>
					<view class="more commot-zan">
						<view @click="expandChild(item)" class="more_expan">
							<text v-if="item.childComment.length && (item.childComment.length != expandData[item.id])">
								{{$t('media.expandMore')}}({{item.childComment.length}})
							</text>
						</view>
					</view>
					<div class="child" v-if="item.childComment.length">
						<view class="child-commit"
							@click="replyComment={id:cItem.commentId,userName:cItem.nickName};commentEvent()"
							v-for="cItem in item.childComment.slice(0,expandData[item.id] || 0)" :key="cItem.commentId">
							<u-avatar size="72" :src="$u.file.getMedieUrl(cItem.avatar)"></u-avatar>
							<infoStatus @expand="expand"
								:item="{...cItem,id:cItem.commentId,comment:cItem.content,userName:cItem.nickName,createTime:cItem.commentTime}">
							</infoStatus>
						</view>

						<view class="more">
							<view @click="fewerChild(item)" class="more_fewer" v-if="expandData[item.id]">
								{{$t('media.packUp')}}
							</view>
						</view>
					</div>
				</view>
				<divider v-if="total==commentList.list.length && commentList.list.length"></divider>
				<view class="no-commit" v-else>
					<text>{{$t('media.noCommentsYet')}}</text>
				</view>
			</scroll-view>
			<view class="comment-box">
				<view class="comment-input">
					<u-input :placeholder="$t('media.enterContent')" class="commit-input" @click="commentEvent"
						v-model="comment" type="textarea" :border="true" :fixed="true">
					</u-input>
					<view>
						<imageForSize class="send-btn" :src="require('@/static/images/video/send.png')" size="50">
						</imageForSize>
					</view>
				</view>
				<view class="face" @click="commentEvent">
					<text>🙂</text>
					<!--                    <image style="height: 58rpx; width: 58rpx;" src="@/static/svg/face.svg"/>-->
				</view>
			</view>

		</u-popup>

		<u-popup ref="commentPopup" duration="0" v-model="commentPopup" mode="bottom" :safe-area-inset-bottom="true"
			:style="{bottom: commentPoupNotom}" class="interior-popup" border-radius="0"
			@close="emojiBoxShow = false;replyComment = {}">
			<view class="comment-popup-box comment-box" style="">
				<view class="comment-input">
					<u-input
						:placeholder="replyComment.userName?`${$t('media.reply')} ${replyComment.userName}`: $t('media.enterContent')"
						id="edit_message_inout" class="commit-input" v-model="comment" type="textarea" :border="true"
						:adjust-position="false" :focus="true" @focus="emojiBoxShow = false">
					</u-input>
					<view>
						<imageForSize @click="send" class="send-btn" :src="require('@/static/images/video/send.png')"
							size="50"></imageForSize>
					</view>
				</view>
				<view class="face" @click="openEmoji">
					<text>🙂</text>
					<!--                    <image style="height: 58rpx; width: 58rpx;" src="@/static/svg/face.svg"/>-->
				</view>
			</view>
			<view class="emoji-box" :style="`height:${emojiBoxShow?300:0}rpx;padding:${emojiBoxShow?20:0}rpx`">
				<scroll-view :scroll-y="true" style="height:100%;">
					<text v-for="(item,index) in emojiList" :key="index" @click="addEmoji(item)">{{item.val}}</text>
				</scroll-view>

			</view>
		</u-popup>

	</view>

	</view>
</template>

<script>
	import infoStatus from './comment-status.vue'
	import emojiList from '@/static/js/emoji.json'
	export default {
		components: {
			infoStatus
		},
		name: 'cVideo',
		props: {
			//视频源
			video: {
				type: Object,
				default: {}
			},
			videoCurrent: {},
			record: {
				type: Object | String,
				default: false
			},
			// 是否留下观看记录 - 取反
			watch: {
				type: Object | String,
				default: false
			},
			// 一坨短视频组的key --- 其实不想写但是 针对于视频来说，现在随便加载几条就是重复的几乎无法使用 id作为播放暂停的唯一键
			vKey: {
				type: String,
				default: ''
			},
			taskInfo: {
				default: () => ({}),
			},
			// 线下理财
			offLine: {
				default: () => ({}),
				type: Object
			},
		},
		data() {
			return {
				// 展开的数据 id : 展开数量
				expandData: {},
				// 回复的信息 
				replyComment: {},
				//评论字段
				comment: '',
				onloadCode: '',
				flag: '',
				commentFlag: false,
				commentPopup: false,
				// 当前视频播放对象
				currentVideoContext: null,
				// 关注按钮字体
				FollowBtn: this.$t('media.Follow'),
				videoObj: null,
				// 评论列表
				commentList: {
					list: [],
					isGet: false
				},
				sharePopShow: true,
				imgGroup: [require('static/images/login/ins.png'), require('static/images/login/facebook.png'), require(
					'static/images/login/tiktok.png'), require('static/images/login/YouTube.png')],
				friendList: [],
				commentPoupNotom: 0,
				getCommentData: {
					pageSize: 20,
					pageNum: 1,
					id: this.video.id
				},
				total: 0,
				moreTypeText: '展开',
				more: {
					text: '展开',
					ststus: false
				},
				PlayCompleted: false,
				// 底部操作按钮
				bottomList: [{
						name: 'collect',
						val: 0,
						image: require('@/static/images/video/star-k.png'),
						image1: require('@/static/images/video/star-s.png'),
						status: false
					},
					{
						name: 'share',
						val: 0,
						image: require('@/static/images/video/share-k.png'),
						image1: require('@/static/images/video/share-k.png')
					},
					{
						name: 'comment',
						val: 0,
						image: require('@/static/images/video/comment-k.png'),
						image1: require('@/static/images/video/comment-k.png')
					},
					{
						name: 'heart',
						val: 0,
						image: require('@/static/images/video/heart-k.png'),
						image1: require('@/static/images/video/heart-s.png'),
						status: false
					},
				],
				errorImg: '', // 加载失败图片
				videoStopTime: "", // 视频停止时间
				dbTimmer: null, // 单双点击延时器
				version: 'v3',
				emojiList,
				emojiBoxShow: false,
				titleOver: false, // 视频是否溢出
				titleShowAll: false, // 标题展示
			};
		},
		watch: {
			video: {
				handler(newData) {
					this.videoObj = newData;
					this.PlayCompleted = false
				},
				immediate: true,
				deep: true,
			},
			videoCurrent: {
				handler(val) {
					if (this.videoObj.userName !== undefined) {
						this.$nextTick(() => {
							console.log(val, 100);
							this.currentVideoContext = uni.createVideoContext(this.cVideoId)
							this.cVideoId === val ? this.currentVideoContext.play() : this.currentVideoContext
								.pause()
						})
					} else {
						console.log(val, 100);
						this.currentVideoContext = uni.createVideoContext(this.cVideoId)
						this.cVideoId === val ? this.currentVideoContext.play() : this.currentVideoContext.pause()
					}

				},
				deep: true,
				immediate: true
			},
		},
		computed: {
			// 通过vkey + 视频id 信息 成为本视频唯一的id
			cVideoId() {
				return this.vKey ? `${this.vKey}_videoObj_${this.videoObj.id}` : `videoObj_${this.videoObj.id}`
			}
		},
		mounted() {
			// if ('addEventListener' in document) {
			//     document.addEventListener('DOMContentLoaded', function() {
			//         FastClick.attach(document.body);
			//     }, false);
			// }
			// if ('addEventListener' in document) {
			// var box = document.getElementById(this.cVideoId);
			// // 	document.addEventListener('DOMContentLoaded', function() {
			// // 		FastClick.attach(box);
			// // 	}, false);
			// box.addEventListener('dblclick', () => {
			// 	console.log(9999);
			// })
			if (this.videoObj.title) {
				this.titleOverfollow()
			}
			// }
		},
		methods: {
			expandChild(item) {
				this.expandData[item.id] = item.childComment.length
				this.$forceUpdate()
			},
			fewerChild(item) {
				this.expandData[item.id] = 0
				this.$forceUpdate()
			},
			getVideoDetail() {
				this.$u.get("/app/short/video/" + this.videoObj.id).then(res => {
					this.videoObj = res.data;
				});
			},

			// 改变视频状态,flag为每个视频的播放状态，自定义图标与flag的状态挂钩
			changeVideoStatus(e, param = this.cVideoId) {
				console.log('点击！！！')
				// this.touchNum++
				// setTimeout(() => {
				// 	if (this.touchNum == 1) {
				// 		console.log('单击')
				this.currentVideoContext = uni.createVideoContext(param)
				if (!this.flag) {
					this.flag = true
					this.currentVideoContext.pause()
				} else {
					this.currentVideoContext.play()
				}
				// 	}
				// 	if (this.touchNum >= 2) {
				// 		console.log('双击')
				// 	}
				// 	this.touchNum = 0

				// }, 300)
				// console.log(param,'param');
				// if (this.dbTimmer) {
				// 	this.dbTimmer = clearTimeout(this.dbTimmer)
				// 	console.log('双击')
				// } else {
				// 	this.dbTimmer = setTimeout(() => {
				// 		console.log('单 击')
				// 		this.dbTimmer = clearTimeout(this.dbTimmer)
				// 		this.currentVideoContext = uni.createVideoContext(param)
				// 		if (!this.flag) {
				// 			this.flag = true
				// 			this.currentVideoContext.pause()
				// 		} else {
				// 			this.currentVideoContext.play()
				// 		}
				// 	}, 1000)
				// }


			},
			// 播放视频的回调
			onplay() {
				// this.flag = false
				this.showtime = false
				this.$set(this, 'flag', false)
				this.$emit('play', this.videoObj)
			},

			// 暂停视频的回调
			onpause() {
				this.flag = true
				this.$emit('pause', this.videoObj)
			},
			// 关注
			Follow() {
				this.videoObj.concern = !this.videoObj.concern
				this.$u.post("/app/user/concern/" + this.video.userId).then(res => {
					this.$u.toast(res.msg)
					this.$u.init.getUserInfo()
				}).catch(err => {
					this.videoObj.concern = !this.videoObj.concern
				})
			},
			// 收藏
			getCollection() {
				let fn = null
				fn = (status) => {
					if (status) {
						this.videoObj.collection = this.videoObj.collection - 1
						this.videoObj.currentCollection = 0
					} else {
						this.videoObj.collection = this.videoObj.collection + 1
						this.videoObj.currentCollection = 1
					}

				}
				fn(this.videoObj.currentCollection)
				this.$u.put("/app/short/video/collection/" + this.video.id).then(res => {
					this.$u.toast(res.msg)
				}).catch(err => {
					fn(!this.videoObj.currentCollection)
				})
			},
			// 喜欢
			getHeart() {
				const fn = (status) => {
					if (status) {
						this.videoObj.likeCount = this.videoObj.likeCount - 1
						this.videoObj.currentLike = 0
					} else {
						this.videoObj.likeCount = this.videoObj.likeCount + 1
						this.videoObj.currentLike = 1
					}

				}
				fn(this.videoObj.currentLike)
				this.$u.put("/app/short/video/like/" + this.video.id).then(res => {
					this.$u.toast(res.msg)
				}).catch(() => {
					fn(!this.videoObj.currentLike)
				})
			},

			// 转发
			getZhuanfa() {
				this.sharePopShow = true
			},

			// 跳转购物车
			goToShoppingCar() {
				uni.navigateTo({
					url: "/pages/shoppingCar/shoppingCar?videoId=" + this.videoObj.id
				})
			},

			// 评论事件
			commentEvent() {
				this.$nextTick(() => {
					this.$refs.commentPopup.open()
					uni.onKeyboardHeightChange(res => {
						this.commentPoupNotom = '200px'
					})
				})
			},

			// 评论
			getComment(update = false) {
				this.$u.post("/app/short/video/comments/page", this.getCommentData).then(res => {
					if (!this.commentList.isGet || update) {
						this.commentList.list = res.data.records
						this.commentList.isGet = true
					}
					this.commentFlag = true
					this.total = res.data.total
				})
			},
			//发送
			send() {
				if (!this.comment) return
				const parentId = this.replyComment.id
				let obj = {
					videoId: parseInt(this.video.id),
					comment: this.comment,
					parentId, // 点击的评论的id
				}
				this.$nextTick(() => {
					parentId && this.expandData[parentId]++
				})
				this.$u.post("/app/short/video/comments", obj).then(res => {
					this.getComment('1')
					this.commentPopup = false
					this.comment = ''
					this.$nextTick(() => {
						this.videoObj.comments++
					})
				})
			},
			expand(item) {},
			//分页
			pagingEvent() {
				if (this.commentList.list.length == this.total) {
					return
				}
				this.getCommentData.pageNum += 1
				this.getComment()
			},
			timeupdate(e) {
				if (!this.watch) {
					// 表示不留下观看记录
					return
				}
				if (e.detail.durationTime < 5) {
					if (e.detail.currentTime == e.detail.durationTime) {
						this.$u.get(`/app/short/video/recordUserHotspot?videoId=${this.videoObj.id}`).then(res => {

						})

						console.log(222)
					}
				} else {
					if (e.detail.currentTime == e.detail.durationTime) this.PlayCompleted = true
					if (!this.PlayCompleted && e.detail.currentTime >= 5) {
						this.PlayCompleted = true
						this.$u.get(`/app/short/video/recordUserHotspot?videoId=${this.videoObj.id}`).then(res => {

						})
						console.log(111)
					}
				}

			},
			// 图片加载失败
			imgLoadErr(e) {
				console.log(e, '加载失败了')
			},
			openSharePop() {
				this.$emit('openSharePop', true)
			},
			//进入直播间
			intoLives() {

				if (this.videoObj.liveing) {
					uni.publicJS.intoPlayer({
						userName: this.videoObj.nickName,
						userId: this.videoObj.id,
						userName: this.videoObj.userName
					})
				} else {
					this.$u.route('/pages/user/components/userInfo', {
						userId: this.videoObj.userId
					})

				}

			},
			videoDblclick(e) {
				console.log(e);
			},
			openEmoji() {
				this.emojiBoxShow = !this.emojiBoxShow
				if (this.emojiBoxShow) {
					const input = document.querySelector('#edit_message_inout textarea')
					// 获取光标位置
					this.rangIndex = this.getPosition(input)
				}
			},
			addEmoji(data) {
				const emo = data.val
				// 判断光标是否在末尾
				const state = this.comment.length === this.rangIndex
				this.comment = this.insertStr(this.comment, this.rangIndex, emo)
				this.rangIndex = this.rangIndex + emo.length
				// // 新光标位置应该在添加表情后的位置，表情才会向后方添加
				// const newRangIndex = this.rangIndex + emo.length
				// this.$nextTick(()=>input.setSelectionRange(newRangIndex, newRangIndex))
			},
			// 根据原字符 开始位置  新的字符 插入后返回新的
			insertStr(source, start, newStr) {
				return source.slice(0, start) + newStr + source.slice(start)
			},
			getPosition(element) {
				let cursorPos = 0;
				// IE浏览器
				if (document.selection) {
					var selectRange = document.selection.createRange();
					selectRange.moveStart('character', -element.value.length);
					cursorPos = selectRange.text.length;
				} else if (element.selectionStart || element.selectionStart == '0') {
					cursorPos = element.selectionStart;
				}
				return cursorPos;
			},
			titleOverfollow() {
				const text = this.$el.querySelector('.video-title')
				if (text.scrollHeight > text.offsetHeight) {
					this.titleOver = true
				} else {
					this.titleOver = false
				}
				console.log(this.titleOver, 'this.titleOverthis.titleOverthis.titleOver');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.c-video-page {
		height: 100%;
		width: 100%;

		.swiper-item {
			height: 100%;
			width: 100%;
			position: relative;

			.video-text {
				width: 100%;
				position: absolute;
				bottom: 50rpx;
				padding: 30rpx 130rpx 30rpx 50rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #fff;
				font-size: 24rpx;
				font-weight: 500;

				.video-title-box {
					display: flex;
				}

				.video-title {
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: normal;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					word-break: break-all;

					&.open {
						-webkit-line-clamp: inherit;
					}
				}
			}

			uni-video {
				height: 100%;
				width: 100%;

				/deep/ .uni-video-bar {
					display: flex !important;
					transform: translateY(20%);
					opacity: 0.5;
					background-color: transparent;

					.uni-video-controls {
						height: 40rpx;
						display: flex;
						align-items: center;

						.uni-video-progress {
							margin: 0 12rpx;
							// height: 40rpx;
						}
					}

					.uni-video-fullscreen,
					.uni-video-control-button {
						display: none;
					}
				}
			}

			/deep/ .stop {
				.uni-video-bar {
					opacity: 1 !important;
				}
			}
		}

		.user {
			position: fixed;
			left: 30rpx;
			color: white;
			bottom: 100rpx;
			display: flex;
			flex-direction: column;
			width: 50%;
		}

		.icon-view {
			position: fixed;
			top: calc(50% - 25rpx);
			left: calc(50% - 25rpx);
			color: #fff;
			width: 50rpx;
			height: 50rpx;
		}

		.shopping {
			width: 64rpx;
			height: 64rpx;
			z-index: 10000;
			background: rgba(80, 98, 107, 1);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 36rpx;
				height: 36rpx;
			}
			
		}

		.user-list-left {
			position: absolute;
			color: white;
			bottom: 50rpx;
			right: 24rpx;
			z-index: 10000;
			display: flex;
			width: 96rpx;
			height: 714rpx;
			overflow: hidden;

			.user-avatar {
				position: relative;
				height: fit-content;

				.follow-icon {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translate(-50%, 50%);
				}
			}

			.bottom-user {
				width: 100%;
				box-sizing: border-box;
				border-radius: 45rpx;
				background: rgba(255, 255, 255, 0.32);
				padding: 10rpx 14rpx;
				font-size: 26rpx;
				font-family: SFUIDisplay-Medium, SFUIDisplay;
				font-weight: 500;
				display: flex;
				align-items: center;

				.name-watch {
					width: 0;
					flex: auto;
				}

				.lives {
					border-radius: 50%;
					border: 4rpx solid #474ed0;
					padding: 2rpx;
				}

				cover-image,
				image {
					height: 68rpx;
					width: 68rpx;
					border-radius: 50%;
				}

				.watch {
					display: flex;

					cover-image {
						width: 40rpx;
						height: 40rpx;
					}
				}

				.content {
					margin-left: 10rpx;

					view {
						display: flex;
						align-items: center;
					}
				}

				.btn {
					view {
						width: 123rpx;
						height: 56rpx;
						box-sizing: border-box !important;
						border-radius: 45rpx;
						background-color: #2934D0;
						font-size: 24rpx;
						font-family: SF;
						line-height: 56rpx;
						text-align: center;
						font-weight: 400;
						color: #FFFFFF;
					}

					margin-left: 20rpx;
				}
			}

			.bottom-list {
				display: flex;
				flex: 1;
				align-items: center;
				width: 100%;
				flex-wrap: wrap;
				bottom: 0rpx;
				position: absolute;
				flex-direction: column-reverse;

				.handel-img {
					width: 46rpx;
					height: 46rpx;
					margin-bottom: 4rpx;
				}

				.item {
					display: flex;
					flex-direction: column;
					align-items: center;
					flex: 0.25;

					&:not(last-child) {
						margin-bottom: 24rpx;
					}
				}
			}
		}


		.share-pop {
			.share-main {
				padding: 68rpx 46rpx 0;
				height: 70vh;

				.othen-way {
					display: flex;

					>* {
						&:not(:first-child) {
							margin-left: 40rpx;
						}
					}
				}

				.friends {
					padding-top: 30rpx;

					.user-list-item {
						margin-top: 30rpx;

						/deep/ .avatar {
							// height: 100%;
							box-sizing: content-box;
							padding-bottom: 30rpx;
							border-bottom: 2rpx solid #F2F3F5;
						}
					}

					.slot-btn {
						margin: 0;
						// margin-right: 14rpx;
						width: 158rpx;
						height: 48rpx;

						&:not(.u-primary-plain-hover) {
							background-color: #fff !important;
							color: #2934D0 !important;
							border-color: #2934D0 !important;
						}

						&.u-primary-plain-hover {
							background-color: #2934D0 !important;
						}
					}
				}
			}
		}

		.interior-popup {
			/deep/ .uni-scroll-view {
				// padding-bottom: 50rpx;
			}

			.friendScrollView {
				height: 500rpx;
				padding-top: 20rpx;

				.comment {
					padding: 30rpx 46rpx;

					.father {
						display: flex;
						justify-content: space-between;

					}

					.commot-zan {
						padding-left: 100rpx;
						display: flex;
						padding-right: 100rpx;

						.commot-zan-btn {}
					}

					.child {
						padding-left: 100rpx;

						.child-commit {
							display: flex;
							justify-content: space-between;
							padding: 30rpx 0;
						}
					}

					.more {
						font-size: 12px;
						display: flex;
						justify-content: space-between;

						&_expan {
							color: #2979ff;
						}

						&_fewer {
							color: #333;
						}
					}
				}

				.no-commit {
					width: 100%;
					height: 500rpx;
					font-size: 40rpx;
					color: #ccc;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

		}

		/deep/ .u-drawer-content {
			border-radius: 60rpx 60rpx 0 0;
		}

		.comment-box {
			bottom: 0;
			background: #F8F8F8;
			padding: 40rpx 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.comment-input {
				flex: auto;
				border: 2rpx solid #1B1D29 !important;
				border-radius: 20rpx;
				display: flex;

				>view {
					display: flex;
					align-items: center;
				}

				.send-btn {
					padding-right: 10rpx;
				}
			}

			.commit-input {
				border: none;

				/deep/ .u-input__right-icon {
					display: none;
				}

				.uni-textarea-wrapper {
					display: flex;
					align-items: center;
				}

				.uni-textarea-placeholder {
					color: #1B1D29 !important;
				}
			}

			.face {
				font-size: 50rpx;
				width: 112rpx;
				height: 116rpx;
				border-radius: 20rpx;
				border: 2rpx solid #1B1D29;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-left: 30rpx;
			}
		}

		.emoji-box {
			transition: 0.3s;
			width: 100%;
			height: 300rpx;
			padding: 20rpx;
			font-size: 64rpx;
		}

	}
</style>